<template>


  <el-main style="height: 930px;">


    <div>

      <el-dialog :visible.sync="dialogFzVisible" title="选择分站" @close="closeDialog">
        <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
          <el-input v-model="searchKeyword" placeholder="请输入关键词" style="width: 200px;"></el-input>
          <el-button @click="searchSubstations" style="margin-left: 10px;">搜索</el-button>
        </div>
        <el-table :data="filteredSubstations" style="width: 100%">
          <el-table-column prop="substationId" label="ID" width="180px"></el-table-column>
          <el-table-column prop="substationName" label="分站名" width="180px"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="selectSubstation(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>


      <el-select v-model="value" placeholder="请选择想要查询的信息"
                 style="position: relative;left: 120px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-input
        :placeholder="'请选择想要查找的信息'"
        v-model="target"
        clearable
        style="width: auto;left: 150px;position: relative;"
        @keyup.enter.native="getDetail"
        @keyup.backspace.native="getAll">
      </el-input>

      <el-button
        type="primary"
        icon="el-icon-search"
        class="btn1"
        style="position: relative;left: 180px;"
        @click="getDetail">
        搜索</el-button>


    </div>


    <div>
      <el-table
        :data="tableData"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        style="width: 100%;"
        empty-text="无"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        <el-table-column
          prop="invoiceId"
          label="发票编号"
          width="200px"
          sortable="true"
          text-align: center>
        </el-table-column>
        <el-table-column
          prop="deliveryOrderId"
          label="配送单号"
          sortable="true"
          width="180px">
        </el-table-column>
        <el-table-column
          prop="invoiceAmount"
          label="开票金额"
          sortable="true"
          width="180px">
        </el-table-column>

        <el-table-column
          prop="invoiceStatus"
          label="发票状态"
          sortable="true"
          width="180px">
          <template slot-scope="scope" >
            <el-tag
              :type="scope.row.invoiceStatus=='已开票'?'success':'info'">
              {{scope.row.invoiceStatus}}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" sortable="true" width="160px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="downloadInvoice(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 8, 10]"
        :total=allData.length
        :page-size="pageSize"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
  </el-main>


</template>

<script>

import axios from 'axios';

export default{
  name: 'Invoice',
  data(){
    return {
      target:'',
      allData:[],
      tableData:[{

      }],
      dialogData:{},
      dateForm: {
        startDate: '',
        endDate: ''
      },
      dialogVisible: false,
      dialogFzVisible: false,
      substations:[],
      filteredSubstations:[],
      searchKeyword:'',
      substationId:'',
      substationName:'',
      currentPage:1,
      pageSize:5,
      loading:false,
      options:[{
        value: 0,
        label: '-'
      }, {
        value: 1,
        label: '发票编号'
      }, {
        value: 2,
        label: '配送单号'
      }, {
        value: 3,
        label: '发票状态'
      }],
      value:0
    }
  },
  methods:{
    downloadInvoice(row){

      if (row.invoiceStatus==="未开票"){
        this.$message({
          message:'请耐心等候',
          type:'warning'
        })
        return;
      }

      const pdfcontent = row; // 替换为你的 JS 对象

      pdfcontent.substationName=this.substationName;

      axios.post('http://localhost:8088/invoice/createPdf', pdfcontent, { responseType: 'blob' }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', row.invoiceId+'.pdf');
        document.body.appendChild(link);
        link.click();
      }).catch((error) => {
        console.error(error);
      });

    },
    checkDetail(row){
      this.dialogData=row;
      this.dialogVisible=true;
    },
    submitDate() {

      if (this.dateForm.startDate!==''&&this.dateForm.endDate!==''){
        console.log(this.dateForm.startDate, this.dateForm.endDate);
        // 在这里将 this.dateForm.startDate 和 this.dateForm.endDate 格式化为你需要的格式
        // 并发送请求到你的接口
        axios.post('http://localhost:8088/payment/getByDate', null, {
          params: {
            substationId: this.substationId,
            startTime: this.dateForm.startDate,
            endTime: this.dateForm.endDate
          }
        }).then(resData => {
          console.log(resData);
          this.tableData=resData.data.data;
        });
      }else {
        axios.post('http://localhost:8088/payment/get', null, {
          params: {
            substationId: a_substationId,

          }
        }).then(resData => {
          console.log(resData);
          this.tableData=resData.data.data;
        });
      }



    },
    getAll(){

      this.loading=true;
      axios.get('http://localhost:8088/invoice/all/'+this.substationId).then(resData => {
        //console.log(resData);
        this.allData = resData.data.data;
        this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
        this.loading=false;
      }).catch(err =>{
        this.loading=false;
      });
      this.dateForm={
        startDate: '',
        endDate: ''
      }
    },

    // getByPage(){
    //    this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
    //    console.log("asdsad"+this.tableData);
    //  },
    getDetail(){
      this.loading=true;
      switch(this.value){
        case 0:
          alert("请先选择想要查询的信息！");
          this.getAll()
          break;
        case 1:
          axios.get('http://localhost:8088/invoice/all/'+this.substationId).then(resData => {
            this.allData = resData.data.data;
            this.allData = this.allData.filter(row => {
              return row.invoiceId.includes(this.target);
            });
            this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
            this.loading=false;
          }).catch(err =>{
            this.loading=false;
          });
          break;
        case 2:
          axios.get('http://localhost:8088/invoice/all/'+this.substationId).then(resData => {
            this.allData = resData.data.data;
            this.allData = this.allData.filter(row => {
              return row.deliveryOrderId.includes(this.target);
            });
            this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
            this.loading=false;
          }).catch(err =>{
            this.loading=false;
          });
          break;
        case 3:
          axios.get('http://localhost:8088/invoice/all/'+this.substationId).then(resData => {
            this.allData = resData.data.data;
            this.allData = this.allData.filter(row => {
              return row.invoiceStatus.includes(this.target);
            });
            this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
            this.loading=false;
          }).catch(err =>{
            this.loading=false;
          });
          break;
      }
    },

    //上色功能，目前不知道为什么用不了，先放一放
    Dye({row,rowIndex}){
      if(rowIndex == 1){
        return 'success-row';
        // alert(row.orderStatus);
      } else if(row.orderStatus == "缺货"){
        return 'quehuo';
        // alert(row.orderStatus);
      }
      return '';
      // alert(row.orderStatus);
    },
    test(){
      alert("我被电了");
    },

    //分页用
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAll();
      console.log(this.tableData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getAll();
      console.log(this.tableData);
      // console.log(this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize));
    },
    searchSubstations() {
      this.filteredSubstations = this.substations.filter(substation => {
        return substation.substationName.includes(this.searchKeyword);
      });
    },
    showFzDialog() {

      axios.get('http://localhost:8088/substation/all').then(response => {
        this.substations = response.data.data;
        this.filteredSubstations=this.substations;
        this.dialogFzVisible = true;
      }).catch(error => {
        console.error(error);
      });
      this.dialogFzVisible = true;
    },
    selectSubstation(substation) {
      this.substationId=substation.substationId;
      this.substationName=substation.substationName;
      this.dialogFzVisible = false;
      this.getAll();
    }

  },

  mounted() {
    this.showFzDialog();

    // this.loading=true;
    //
    // this.getByPage()
  }

}

</script>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #00aaff;
}

.el-table .quehuo {
  background: #FF0000;
}

.btn1 {
  position: relative;
  right: 0.625rem;
}

</style>

